<template>
<div>
<div class="mui-card" v-for="item in goods" :key="item.img">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="item.selected" @change="updateselected(item.id,item.selected)"></mt-switch>
						<img :src="item.img" class="carimg">
						<div>
						<div class="goodsTitle">
						{{item.title}}
						</div>
						<span style="color:red">{{item.price}}</span>
						<numbox :num="item.count" :id="item.id"></numbox>
						<a href="" @click.prevent="remove(item.id)">删除</a>
						</div>
					</div>
				</div>
			</div>

<div class="mui-card">
	<div class="mui-card-content">
	<div class="mui-card-content-inner">
						商品总计
						<hr/>
						{{$store.getters.getSelectedCount.count}}件商品，总价{{$store.getters.getSelectedCount.price}}元
	</div>
</div>
</div>
</div>
</template>
<script>
import mui from '../mui.min.js'  
import numbox from '@/components/numbox'
export default{
	name:'shopcar',
	data(){
	return({
		goods:""
	})
	},
	components:{numbox:numbox},
	methods:{
		updateselected(id,selected){
		this.$store.commit("updateCarSelected",{id:id,selected:selected})
		},
		remove(id){
		this.$store.commit("removeCar",{id})
		}
	},
	created(){
	this.goods =this.$store.state.car
	},
	mounted(){
	mui(".mui-numbox").numbox()
	}
}
</script>
<style>
.carimg{
	width:50px;
	height:50px;
}
.mui-card-content-inner{
	display:flex;
	align-items:center;
}
.goodsTitle{
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
}
</style>